<template>
  <div class="hd">
    <div class="hd mt10">
      <img src="../../assets/mall_banner.jpg" alt="">
    </div>
    <mall-bar :showsearch="false" :activeitem="1"></mall-bar>
    <position>
      <router-link to="/mall">药品信息</router-link>
      &gt;
      <span class="last">我的订单</span>
    </position>
    <div class="yybox four-cornor-wrapper" style="background:#fff;padding: 20px;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- tabs -->
      <el-tabs v-model="activeTab"  type="border-card" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待付款" name="second">待付款</el-tab-pane>
          <el-tab-pane label="待发货" name="third">待发货</el-tab-pane>
          <el-tab-pane label="待收货" name="fourth">待收货</el-tab-pane>
          <el-tab-pane label="待评价" name="fifth">待评价</el-tab-pane>

        <div class="content" v-show="activeTab === 'first'">
          <div class="shopping-list" v-for="j in 3" :key="j">
            <el-row class="shopping-card-header">
              <el-col :span="12">
                订单号：<span>38382030203002030</span>
              </el-col>
              <el-col :span="12">
                <span class="fr">状态： 已取消</span>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="shopping-card-item" v-for="i in 2" :key="i">
              <el-col :span="5">
                <img src="../../assets/nav-2.png" alt="" >
              </el-col>
              <el-col :span="19" class="re">
                <div class="f20">大标题大标题大标题大标题大标题大标题</div>
                <div class="t3 mt20">规格规格规格规格</div>
                <div class="mt20">
                  <span class="money">￥99.00</span>
                  &nbsp;&nbsp;&nbsp;
                  <span class="t3">x 3</span>
                </div>
              </el-col>
            </el-row>
            <div class="shopping-card-footer">
              <el-row>
                <el-col :span="20">
                  合计： <span class="money">￥999.00</span>
                </el-col>
                <el-col :span="4">
                  <a class="common-main-button fr" href="javascript:;">前往付费</a>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        
        </el-tabs>
          
    </div>
  </div>
</template>

<script>
import MallBar from '../../components/MallBar'
import Position from '../../components/Position'
export default {
  components: {MallBar, Position},
  data () {
    return {
      productNum: 1,
      activeTab: 'first'
    }
  },
  methods: {
    handleTabClick (tab) {
      console.log(tab)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.shopping-list {
  padding:20px;
  margin-bottom: 20px;
  background-color: #FFF5EB;
}
.money {
    color: @color-price;
    font-size: 1.4em;
  }
.shopping-card-header {
  border-bottom: 1px solid #F7E1D7;
  padding-bottom: 20px;
}
.shopping-card-item {
  padding: 20px;
  img {
    width: 100%;
  }
}
.shopping-card-footer {
  padding-top: 20px;
  border-top: 1px solid #F7E1D7;
}
</style>
